<template lang="html">
<div id="linechart">
  <div id="main">

  </div>
</div>
</template>

<script>
    import echarts from "echarts";
    import {
        errFun,
    } from "../../tools.js";
    import api from "../../api"
    export default {
        computed: {
            // weekly: function() {
            //     return this.$store.state.weekly.weekly
            // },
        },
        data() {
            return {
                // 模拟的虚拟数据
                // chart1: {
                //     kcals: [1.46611, 17.66293, 25.15765, 500, 0.0, 0.0, 0.0],
                //     times: [348, 4354, 15290, 30000, 0, 0, 0]
                // }
                chart: [],
            }
        },
        created() {

        },
        methods: {
            draw(dom, chart) {
                var myChart = echarts.init(dom);
                myChart.setOption({

                    tooltip: {
                        trigger: 'axis',
                    },
                    grid: {
                        right: '13%',
                        left: '13%'
                    },

                    legend: {

                        data: [{
                            name: '消耗',
                            // 强制设置图形为圆。
                            icon: 'roundRect',

                            // 设置文本为红色
                            textStyle: {
                                color: '#e66769'
                            }
                        }, {
                            name: '得分',
                            // 强制设置图形为圆。
                            icon: 'roundRect',

                            // 设置文本为红色
                            textStyle: {
                                color: '#00c6cd'
                            }
                        }],
                    },
                    xAxis: [{
                        type: 'category',
                        boundaryGap: false,
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#fff"
                            }
                        },
                        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                    }],
                    yAxis: [{
                            type: 'value',
                            name: '消耗',
                            min: 0,
                            max: this.getMax(chart.kcals) * 2 || 500,
                            position: 'left',
                            splitLine: {
                                // show: false,
                                lineStyle: {
                                    // 使用深浅的间隔色
                                    color: ['#666262'], // 表格中的线的颜色
                                }
                            },
                            axisLine: {
                                lineStyle: {
                                    color: "#e66769"
                                }
                            },
                        },

                        {
                            type: 'value',
                            name: '得分',
                            min: 0,
                            max: this.getMax(chart.times) * 3 || 1000,
                            position: 'right',
                            splitLine: {
                                show: false
                            },
                            axisLine: {
                                lineStyle: {
                                    color: "#00c6cd"
                                }
                            },
                            // axisLabel: {
                            //     formatter: '{value} °C'
                            // }
                        }
                    ],
                    series: [{
                            name: '消耗',
                            type: 'line',
                            smooth: true,
                            lineStyle: {
                                normal: {
                                    color: 'transparent'
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: '#e66769'
                                }
                            },
                            areaStyle: {
                                normal: {
                                    // color: new echarts.graphic.LinearGradient(0, 0, 0, 3, [{
                                    //     offset: 0,
                                    //     color: 'rgb(204, 92, 250)'
                                    // }, {
                                    //     offset: 1,
                                    //     color: 'rgb(200, 35, 151)'
                                    // }])
                                    color: {
                                        type: 'RadialGradient',
                                        x: 0,
                                        y: 0,
                                        x2: 0,
                                        y2: 1,
                                        colorStops: [{
                                            offset: 0,
                                            color: '#e66769' // 0% 处的颜色
                                        }, {
                                            offset: 1,
                                            color: '#e66769', // 100% 处的颜色
                                        }],

                                        globalCoord: false // 缺省为 false
                                    }
                                }
                            },
                            data: chart.kcals
                        },

                        {
                            name: '得分',
                            type: 'line',
                            smooth: true,
                            yAxisIndex: 1,
                            lineStyle: {
                                normal: {
                                    color: 'transparent'
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: '#00c6cd'
                                }
                            },
                            areaStyle: {
                                normal: {
                                    // color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
                                    //     offset: 0,
                                    //     color: 'rgb(116, 89, 253)'
                                    // }, {
                                    //     offset: 1,
                                    //     color: 'rgb(90, 29, 227)'
                                    // }])
                                    color: {
                                        type: 'RadialGradient',
                                        x: 0,
                                        y: 0,
                                        x2: 0,
                                        y2: 1,
                                        colorStops: [{
                                            offset: 1,
                                            color: '#00c6cd'
                                                // 0% 处的颜色
                                        }, {
                                            offset: 0,
                                            color: '#00c6cd'
                                                // 100% 处的颜色
                                        }],
                                        globalCoord: false // 缺省为 false
                                    }
                                }
                            },
                            data: chart.times,
                        }
                    ]
                });

            },
            getMax(arr) {
                var newArr = [];
                for (var i = 0; i < arr.length; i++) {
                    newArr.push(arr[i]);
                }
                newArr.sort(this.max);
                return newArr[newArr.length - 1];
            },
            // 按照从小到大的顺序进行排序
            max(a, b) {
                return a - b
            }

        },
        mounted() {
            //绘制echart
            var dom = document.getElementById('main');
            var that = this;
            api.getWeeklyByid(that.$route.params.id).then(response => {
                if (response.data.code == 100) {
                    that.chart = response.data.result.chart;
                    that.draw(dom, that.chart);
                }
            })

        },
    }
</script>

<style lang="css">
    #linechart {
        #main {
            width: 100%;
            height: 200px;
        }
    }
</style>